<template>
    <!-- 添加宠物页面 -->
    <div class="pet">
        <!-- navbar标题栏 -->
        <van-nav-bar title="宠物资料" left-text="返回" left-arrow @click-left="goBack" />
        <!-- 头像区域 -->
        <div class="pic">
            <!-- 头像上传组件 -->
            <van-uploader class="list-upload" :max-count="1" accept="image/jpeg, image/png" :after-read="afterRead"
                :preview-image="false" multiple v-model="fileList">
                <!-- 自定义上传效果 -->
                <template v-if="imgUrl == null">
                    <van-image fit="cover" round width="10rem" height="10rem" :src="require('../assets/img/logo.jpg')"
                        style="background-color:#fff;border:1px solid gray;padding:1rem;box-sizing: border-box;" />
                </template>
            </van-uploader>
            <!-- 如果选择了头像后，这里显示图片 -->
            <img v-if="imgUrl" alt class="afterImg" :src="imgUrl" />
            <!-- 右下角小相机图标 -->
            <img v-show="hidden_xiangji" src="../assets/img/xiangji.png"
                style="width: 2rem; position: absolute; top: 13rem; left: 21.5rem" />
        </div>
        <van-field name="radio" label="类型">
            <template #input>
                <van-radio-group v-model="typeRadio" direction="horizontal">
                    <van-radio name="cat">猫咪</van-radio>
                    <van-radio name="dog">狗狗</van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <!-- 宠物名 -->
        <van-field v-model="petName" label="名字" placeholder="请填写宠物名字" />
        <!-- 宠物年龄 -->
        <van-field v-model="petAge" type="number" label="年龄" placeholder="请输入阿拉伯数字" />
        <!-- 宠物性别 -->
        <van-field name="radio" label="性别">
            <template #input>
                <van-radio-group v-model="sexRadio" direction="horizontal">
                    <van-radio name="female">女生</van-radio>
                    <van-radio name="male">男生</van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <!-- 宠物品种 -->
        <van-field v-model="petBreed" label="品种" placeholder="非必填" />
        <van-field v-model="describe" rows="2" autosize label="宠物简介" type="textarea" maxlength="50" placeholder="非必填"
            show-word-limit />
        <div style="margin: 16px">
            <van-button style="background-color: #f8e176" size="large" round @click="AddPetData">添加</van-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            imgUrl: null,
            petName: '',
            petNameERR: false,
            petAge: '',
            petAgeERR: false,
            typeRadio: 'cat',
            sexRadio: 'female',
            petBreed: '',
            describe: '',
            fileList: [],
            hidden_xiangji: true,
        };
    },
    methods: {
        goBack() {
            this.$router.back();
        },
        afterRead(file) {
            let that = this;
            // 此时可以自行将文件上传至服务器
            console.log(file);
            // 创建表单数据对象
            var data = new FormData();
            data.append("file", file.file);
            let config = {
                headers: {
                    "Content-Type": "multipart/form-data"
                }
            };
            // 上传图片
            this.$axios
                .post("http://47.92.27.111:9000/upload", data, config)
                .then(res => res.data)
                .then(res => {
                    if (res.code == 200) {
                        console.log("文件上传成功返回：", res.data);
                        that.fileList.push(res.data);
                        that.imgUrl = res.data;
                        console.log("-----", that.imgUrl);
                        that.hidden_xiangji = !this.hidden_xiangji;
                    }
                });
        },
        AddPetData() {
            if (!this.imgUrl) {
                this.$toast.fail("请添加宠物头像")
                return
            }
            if (!this.petName) {
                this.$toast.fail("请添加宠物名字")
                return
            }
            if (!this.petAge) {
                this.$toast.fail("请添加宠物年龄")
                return
            }
            const data = {
                p_img: this.imgUrl,
                p_name: this.petName,
                p_year: this.petAge,
                p_gender: this.sexRadio == "female" ? "0" : "1",
                p_type: this.typeRadio == "cat" ? "1" : "2",
                p_content: this.describe,
                p_breed: this.petBreed
            }
            this.$axios.post(this.$api.petAdd, data)
                .then(res => res.data)
                .then(res => {
                    console.log(res);
                    this.$router.back()
                })
        }
    }
};
</script>

<style lang="scss" scoped>
.pic {
    background-color: #f8e176;
    height: 15rem;
    text-align: center;
    padding-top: 5rem;
    position: relative;
}

.afterImg {
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid gray;
    background-color: #f0f0f0;
}
</style>
